<template>
  <div>
    <div class="selectEmissionSourceDictionary" v-show="showType == 1">
      <!-- 标题 -->
      <div class="selectEmissionSourceDictionary-title">设置排放源数值</div>
      <el-button @click="showType = 2">添加排放源</el-button>
      <el-button @click="testBack()">保存核算</el-button>
      <el-button @click="addPDF()">表单导入</el-button>
      <!-- 表格-已添加排放源 -->
      <div class="selectEmissionSourceDictionary-report">
        <normal-table
          :tableData="tableData2"
          :paginationConfig="paginationConfig2"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList2"
          @event="handleEvent2"
          @changePage="changePage2"></normal-table>
      </div>

    </div>
    <div class="selectEmissionSourceDictionary" v-show="showType == 2">
      <!-- 标题 -->
      <div class="selectEmissionSourceDictionary-title">选择排放源</div>


      <!-- 条件筛选 -->
      <div class="-condition">
        <div class="selectEmissionSourceDictionary-condition-form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"/>
        </div>

      </div>
      <div class="selectEmissionSourceDictionary-condition-btn">
        <el-button @click="initTableData()">查询</el-button>
        <el-button @click="reset()">重置</el-button>
      </div>

      <!-- 表格-核算报告 -->
      <div class="selectEmissionSourceDictionary-report">
        <normal-table
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>

    </div>
    <!-- 导入pdf表单数据 -->
    <div class="selectEmissionSourceDictionary" v-show="showType == 3">
      <!-- 步骤条 -->
      <el-steps :active="step" finish-status="success">
        <el-step title="文件上传"></el-step>
        <el-step title="表格识别"></el-step>
        <el-step title="字段匹配"></el-step>
        <el-step title="自动填写"></el-step>
      </el-steps>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>

      <!-- 文件上传 -->
      <div v-if="step == 0">
        <el-upload
          drag
          :headers="{'Authorization':'Bearer test01', 'tenant-id':1}"
          action="http://192.168.1.133:48080/admin-api/enterprise/pdfImport/upload_file"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text ">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传pdf文件，且不超过100MB</div>
        </el-upload>
      </div>

      <!-- 表格识别 -->
      <div v-if="step == 1">
        <normal-table
          :tableData="PDFtableData"
          :tableLabel="PDFtableLabel"></normal-table>
      </div>
      <!-- 字段匹配 -->
      <div v-if="step == 2">
        <normal-form-plus
          class="pdf-form"
          :formModel="PDFformModel"
          :config="PDFconfig"
          :plus="PDFplus"/>
      </div>
      <!-- 自动填写 -->
      <div v-if="step == 3">

      </div>
    </div>
  </div>
</template>

<script>
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  name: 'selectEmissionSourceDictionary',
  components: {
    NormalTable,
    NormalFormPlus
  },
  mounted() {
    if (this.$route.query.id) {
      this.accountId = this.$route.query.id
    }
    this.initTableData();
    this.getAccountingSourceByPage();
  },
  data() {
    return {
      PDFconfig: [
        {
          id: 1,
          items: [
            {
              id: '1',
              edit: true,
              type: 'table',
              span: 8,
              model: 'data',
              name: '字段匹配',
              width: 100,
              props: {
                placeholder: "排放因子类别",

              }
            }
          ]
        }
      ],
      PDFformModel: {
        data: [
          {
            l1: "铁矿石",
            l2: "63.5%品位",
            l3: "50000",
            l4: "900",
            l5: "45000000"
          },
          {
            l1: "焦炭",
            l2: "130mm*150mm*300mm",
            l3: "8000",
            l4: "2400",
            l5: "19200000"
          },
          {
            l1: "石灰石",
            l2: "40-80mm",
            l3: "12000",
            l4: "1100",
            l5: "13200000"
          },
          {
            l1: "铁合金",
            l2: "Si:2-4%,Mn:60-70%,Cr:2-4%",
            l3: "2500",
            l4: "4000",
            l5: "10000000"
          },
          {
            l1: "钢铁废料",
            l2: "6mm以下",
            l3: "5000",
            l4: "1400",
            l5: "7000000"
          },
          {
            l1: "硅石",
            l2: "90%以上",
            l3: "3000",
            l4: "3800",
            l5: "11400000"
          },
          {
            l1: "车间物料",
            l2: "M20级水泥",
            l3: "5000",
            l4: "360",
            l5: "1800000"
          },
          {
            l1: "煤",
            l2: "无烟煤",
            l3: "10000",
            l4: "1500",
            l5: "15000000"
          },
          {
            l1: "油漆",
            l2: "大红点5号",
            l3: "1000",
            l4: "12000",
            l5: "12000000"
          },
        ]
      },
      PDFplus: {
        edit: true,
        tableLabel: [
          {
            prop: "l1",
            label: "原材料名称",
            edit: false
          },
          {
            prop: "l2",
            label: "原材料描述",
            edit: false
          },
          {
            prop: "l3",
            label: "数量（吨）",
            edit: false
          },
          {
            prop: "l4",
            label: "单价（元/吨）",
            edit: false
          },
          {
            prop: "l5",
            label: "总金额（元）",
            edit: false
          },
          {
            prop: "p1",
            label: "匹配字段",
            edit: true,
            type: "select",
            options: [
              {label: "无", value: "无"},
              {label: "废气和烟尘", value: "废气和烟尘"},
              {label: "废水", value: "废水"},
              {label: "煤气化过程", value: "煤气化过程"},
              {label: "高炉除尘器尘埃", value: "高炉除尘器尘埃"},
              {label: "焦炭的燃烧", value: "焦炭的燃烧"},
              {label: "铁矿石加工", value: "铁矿石加工"},
              {label: "原材料开采", value: "原材料开采"},]
          },
          {
            prop: "p2",
            label: "注入类型",
            edit: true,
            type: "select",
            options: [{label: "添加", value: "添加"}, {label: "覆盖", value: "覆盖"}]
          },
          {
            prop: "p3",
            label: "注入系数",
            edit: true,
          },
        ],

      },
      step: 0,
      PDFtableData: [
        {
          l1: "铁矿石",
          l2: "63.5%品位",
          l3: "50000",
          l4: "900",
          l5: "45000000"
        },
        {
          l1: "焦炭",
          l2: "130mm*150mm*300mm",
          l3: "8000",
          l4: "2400",
          l5: "19200000"
        },
        {
          l1: "石灰石",
          l2: "40-80mm",
          l3: "12000",
          l4: "1100",
          l5: "13200000"
        },
        {
          l1: "铁合金",
          l2: "Si:2-4%,Mn:60-70%,Cr:2-4%",
          l3: "2500",
          l4: "4000",
          l5: "10000000"
        },
        {
          l1: "钢铁废料",
          l2: "6mm以下",
          l3: "5000",
          l4: "1400",
          l5: "7000000"
        },
        {
          l1: "硅石",
          l2: "90%以上",
          l3: "3000",
          l4: "3800",
          l5: "11400000"
        },
        {
          l1: "车间物料",
          l2: "M20级水泥",
          l3: "5000",
          l4: "360",
          l5: "1800000"
        },
        {
          l1: "煤",
          l2: "无烟煤",
          l3: "10000",
          l4: "1500",
          l5: "15000000"
        },
        {
          l1: "油漆",
          l2: "大红点5号",
          l3: "1000",
          l4: "12000",
          l5: "12000000"
        },
      ],
      PDFtableLabel: [
        {
          prop: "l1",
          label: "原材料名称",
        },
        {
          prop: "l2",
          label: "原材料描述",
        },
        {
          prop: "l3",
          label: "数量（吨）",
        },
        {
          prop: "l4",
          label: "单价（元/吨）",
        },
        {
          prop: "l5",
          label: "总金额（元）",
        },
      ],
      PDFoperationList: [
        {
          name: '选择映射',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        }
      ],
      PDFoperationConfig: {select: false},
      showType: 1,
      // 存储当前页面accountId
      accountId: "",
      // 存储当前页面modelId
      modelId: '',
      formModel: {
        facility: null,// 排放设施
        ghgClassification: null,// GHG分类
        isoClassification: null,//	ISO分类
        name: null,// 排放源名称
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '2',
              edit: true,
              type: 'input',
              span: 4,
              model: 'name',
              name: '',
              props: {
                placeholder: "排放源名称",
                width: 150
              }
            },
            {
              id: '1',
              edit: true,
              type: 'input',
              span: 4,
              model: 'facility',
              name: '',
              props: {
                placeholder: "排放设施",
                width: 150
              }
            },
            {
              id: '4',
              edit: true,
              type: 'select',
              span: 4,
              model: 'ghgClassification',
              name: '',
              props: {
                placeholder: "GHG分类",
                options: [
                  {value: '范围一', label: '范围一'},
                  {value: '范围二', label: '范围二'},
                  {value: '范围三', label: '范围三'},
                ]
              }
            },
            {
              id: '5',
              edit: true,
              type: 'select',
              span: 4,
              model: 'isoClassification',
              name: '',
              props: {
                placeholder: "ISO分类",
                options: [
                  {value: '其他间接排放', label: '其他间接排放'},
                  {value: '供应链下游间接排放', label: '供应链下游间接排放'},
                  {value: '外购产品或服务间接排放', label: '外购产品或服务间接排放'},
                  {value: '运输间接排放', label: '运输间接排放'},
                  {value: '能源间接排放', label: '能源间接排放'},
                  {value: '直接排放或清除', label: '直接排放或清除'},
                ]
              }
            }

          ]
        },
      ],
      plus: {},
      tableData: [],
      tableData2: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      paginationConfig2: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList2: [
        {
          name: '确认',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        }
      ],
      operationList: [
        {
          name: '添加',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        }
      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "name",
          label: "排放源名称",
          width: 140
        },
        {
          prop: "^dataValue",
          label: "活动数据",
        },
        {
          prop: "facility",
          label: "排放设施/活动",
          width: 140
        },
        {
          prop: "ghgClassification",
          label: "GHG分类",
          width: 200
        },
        {
          prop: "isoClassification",
          label: "ISO分类",
          width: 200
        },
        {
          prop: "updater",
          label: "更新人",
        },
        {
          prop: "@updateTime",
          label: "更新时间",
          width: 200
        },
      ],

    }
  },
  methods: {
    PDFhandleEvent() {

    },
    next() {
      if (this.step++ > 3) {
        this.step = 0;
        this.showType = 1;
        this.tableData2 = this.$MOCK.enterprise.accountModelDetail2.data.list
      }
    },
    // 表单导入数据
    addPDF() {
      console.log("adding pdf data")
      this.showType = 3
    },
    testBack() {
      this.$router.push({path: "/enterpriseCarbonAccounting/emission/account"})
    },
    // 获得碳排放核算的排放源分页
    getAccountingSourceByPage() {
      if (this.$MOCK.mock) {
        var tem = JSON.parse(JSON.stringify(this.$MOCK.enterprise.accountModelDetail.data.list))
        for (var i = 0; i < tem.length; i++) {
          console.log(tem[i])
          tem[i].dataValue = ""
        }
        this.tableData2 = tem
        this.paginationConfig2.total = this.$MOCK.enterprise.accountModelDetail.data.total
        return
      }
      this.$API.enterprise.getAccountingSourceByPage({
        accountId: this.accountId,
        pageNo: this.paginationConfig2.page,
        pageSize: this.paginationConfig2.pageSize,
      }).then(response => {
        this.tableData2 = response.data.list
        this.paginationConfig2.total = response.data.total
      })
    },
    // 创建碳排放核算的排放源
    createAccountAndEmission(dataValue, sourceId) {
      this.$API.enterprise.createAccountAndEmission({
        accountId: this.accountId,//	核算ID
        dataValue: dataValue,//	活动数据
        sourceId: sourceId,//	排放源ID
      }).then(response => {
        this.getAccountingSourceByPage()
      })
    },
    // 更新碳排放核算的排放源
    updateAccountAndEmission(dataValue, id) {
      this.$API.enterprise.updateAccountAndEmission({
        dataValue: dataValue,
        id: id
      }).then(response => {
        this.getAccountingSourceByPage()
      })
    },
    // 重置
    reset() {
      this.paginationConfig.page = 1
      this.formModel = {
        facility: null,// 排放设施
        ghgClassification: null,// GHG分类
        isoClassification: null,//	ISO分类
        name: null,// 排放源名称
      }
      this.initTableData()
    },
    // 获取排放源列表
    initTableData() {
      if (this.$MOCK.mock) {
        var tem = JSON.parse(JSON.stringify(this.$MOCK.enterprise.accountModelDetail2.data.list))
        for (var i = 0; i < tem.length; i++) {
          console.log(tem[i])
          tem[i].dataValue = ""
        }
        this.tableData = tem
        this.paginationConfig.total = this.$MOCK.enterprise.accountModelDetail2.data.total
        return
      }
      this.$API.enterprise.getEmissionSourceList({
        ...this.formModel,
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
      }).then(response => {
        this.tableData = response.data.list
        this.paginationConfig.total = response.data.total
      })
    },
    // 获得模型的排放源分页
    getAccountingModelEmissionByPage() {

    },
    // 创建模型的排放源
    createAccountingModelAndEmission(emissionId) {
      this.$API.enterprise.createAccountingModelAndEmission({
        modelId: this.modelId,
        emissionId: emissionId
      }).then(response => {
        this.getAccountingModelEmissionByPage()
      })
    },

    // 添加排放源字典
    add() {
      console.log("adding...")
      this.$router.push("/carbonEmissionManage/addselectEmissionSourceDictionary")
    },
    dao() {
      this.$router.push("/carbonEmissionManage/importEmissionSource")
    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.tableData2 = this.$MOCK.enterprise.accountModelDetail2.data.list
        // this.createAccountAndEmission(row.dataValue, row.id)
        this.showType = 1
      }
    },
    // 分页点击事件
    changePage() {
      this.initTableData()
    },
    changePage2() {
      this.getAccountingModelEmissionByPage()
    },
    handleEvent2(order, row) {
      if (order === 1) {
        this.updateAccountAndEmission(row.dataValue, row.id)
      }
    },
  }
}
</script>

<style lang="less" scoped>
.pdf-form {
  width: 3500px;
}

.my-form-table {
  width: 3600px;
}

.selectEmissionSourceDictionary {

  height: auto;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .selectEmissionSourceDictionary-title {
    font-size: 16px;
    font-weight: bold;
  }

  .selectEmissionSourceDictionary-condition {
    display: flex;

    .selectEmissionSourceDictionary-condition-form {
      flex: 3;
    }

    .selectEmissionSourceDictionary-condition-btn {
      flex: 1;
    }
  }

  // 核算报告表格
  .selectEmissionSourceDictionary-report {
    .selectEmissionSourceDictionary-history-title {
      font-size: 14px;
    }
  }
}
</style>
